<template>
    <div class="content">
        <meta name="referrer" content="no-referrer">
        <img :src="data.coverImgUrl" alt="">
        <div class="">{{data.name}}</div>
        <div class="playCount">{{data.playCount | playCount}}</div>
    </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';

  @Component
  export default class Movies extends Vue {
    @Prop() data!: string;
  }
</script>

<style scoped>
    .content{
        width: 200px;
        position: relative;
    }
    img{
        width: 200px;
        height: 200px;
    }
    .playCount{
        position: absolute;
        padding: 0 5px;
        border-radius: 5px;
        top: 5px;
        right: 5px;
        color: #fff;
        background-color: rgba(0,0,0,0.5);
    }
</style>